<template>
  <div class='container'>
    <div class="header">我的</div>
    <main>
      <div class="ul-box">
        <div class="above">
          <ul>
            <li>
              我的订单
              <b>&#xe6c8;</b>
            </li>
            <li>
              优惠券
              <b>&#xe6c8;</b>
            </li>
            <li>
              影院会员卡
              <b>&#xe6c8;</b>
            </li>
          </ul>
        </div>
        <div class="below">
          <ul>
            <li>
              想看的电影
              <b>&#xe6c8;</b>
            </li>
            <li>
              看过的电影
              <b>&#xe6c8;</b>
            </li>
          </ul>
        </div>
      </div>
      <div class="copyright">
        <p>&copy;猫眼电影 客服电话: <span>1010-5335</span></p>
      </div>
    </main>
    <Footer></Footer>
  </div>
</template>

<script>
  import Footer from "../components/Footer";

  export default {
    name: "My",
    components: {
      Footer,
    }
  }
</script>

<style lang="scss" scoped>
  @import '../assets/scss/variable.scss';
  @import '../assets/scss/mixin.scss';


  div.container {
    height: 100%;
    display: flex;
    flex-direction: column;


    > div.header {
      height: 0.44rem;
      background-color: $primary-color;
      line-height: 0.44rem;
      font-size: 0.2rem;
      color: #fff;
      text-align: center;
    }

    > main {
      flex: 1;
      font-size: 0.16rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0.1rem 0 0.15rem 0;
      @include icon;
      // .ul-box {
      //     @include border-top-1px;
      //     @include border-bottom-1px;
      // }
      .above {
        @include border-top-1px;
        @include border-bottom-1px;
        // padding: 0 0 0 0.15rem;
        ul {
          height: 1.35rem;

          li:last-child::after {
            border: none;
          }
        }
      }

      .below {
        // padding: 0 0 0 0.15rem;
        @include border-top-1px;
        @include border-bottom-1px;

        ul {
          height: 0.9rem;

          li:last-child::after {
            border: none;
          }
        }
      }

      ul {
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        width: 100%;
        margin-top: 0.1rem;
        padding: 0 0 0 0.15rem;

        > li {
          flex: 1;
          display: flex;
          //   flex-direction: column;
          justify-content: space-between;
          align-items: center;
          font-size: 0.14rem;
          height: 0.45rem;
          text-align: center;
          color: #494949;
          @include border-bottom-1px;
          padding: 0 0.15rem 0 0;


          b {
            font-size: 0.12rem;
            color: $font-primary-color;
          }
        }
      }

      .copyright {
        display: flex;
        justify-content: center;

        p {
          color: #909090;
          font-size: 0.12rem;

          span {
            color: #fac14e;
            text-decoration: underline;
          }
        }
      }
    }
  }
</style>